<template>
    <box left="50px"
         top="390px"
         title="经营贡献">
        <div class='leftmid'>
            <my-marquee :info="info.info"></my-marquee>
            <!-- <databox icon="sn">
                <div class="item flex month space-between">
                    <label>月累计</label>
                    <div style="height:37px">
                        <span class="val">{{info.tm?info.tm.total:""}}</span>
                        <span class="unit">万元</span>
                    </div>
                </div>
                <div class="item flex space-between">
                    <label>完成率</label>
                    <div style="height:37px">
                        <span class="val">{{info.tm?info.tm.complete:""}}</span>
                    </div>
                </div>
                <div class="item flex space-between">
                    <label>增幅</label>
                    <div style="height:37px">
                        <span class="val">{{info.tm?info.tm.rise:""}}</span>
                    </div>
                </div>
            </databox>
            <databox icon="jd">
                <div class="item flex month space-between">
                    <label>月累计</label>
                    <div style="height:37px">
                        <span class="val">{{info.jd?info.jd.total:""}}</span>
                        <span class="unit">万元</span>
                    </div>
                </div>
                <div class="item flex space-between">
                    <label>完成率</label>
                    <div style="height:37px">
                        <span class="val">{{info.jd?info.jd.complete:""}}</span>
                    </div>
                </div>

                <div class="item flex space-between">
                    <label>增幅</label>
                    <div style="height:37px">
                        <span class="val">{{info.jd?info.jd.rise:""}}</span>
                    </div>
                </div>
            </databox> -->
            <my-title></my-title>
            <div ref="chart"
                 class="chart"></div>
        </div>
    </box>

</template>

<script>
export default {
    props: {
        info: {},
    },
    watch: {
        info: {
            handler(newVal) {
                this.chartInit(
                    newVal.tmChartData,
                    newVal.jdChartData,
                    newVal.xData,
                    newVal.tmLineData,
                    newVal.jdLineData
                )
            },
            deep: true,
        },
    },
    methods: {
        chartInit(tmData, jdData, xData, tmLineData, jdLineData) {
            let _chart = this.$echarts.init(this.$refs['chart'])
            let _options = {
                grid: {
                    top: '60',
                    right: '30',
                    left: '40',
                    bottom: '30', //图表尺寸大小
                },
                legend: {
                    textStyle: {
                        color: '#8fadcc',
                        fontSize: 12,
                    },
                    itemWidth: 8,
                    itemHeight: 8,
                    icon: 'circle',
                    right: 0,
                    top: 10,
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    color: '#59588D',
                    data: xData,
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '金额/元',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        axisLabel: {
                            color: '#8fadcc',
                            textStyle: {
                                fontSize: 8,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        name: '经营空间率',
                        nameTextStyle: {
                            color: '#8fadcc',
                        },
                        position: 'right',
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#8fadcc',
                                fontSize: 8,
                            },
                            formatter: '{value}%',
                        },
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        name: '同期',
                        data: tmData,
                        barWidth: '4',
                        barGap: '240%',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(255,136,51,0.8)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255,136,51,0.3)',
                                        },
                                    ]
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: '#333',
                                position: 'top',
                            },
                        },
                    },
                    {
                        data: tmData,
                        type: 'pictorialBar',
                        barMaxWidth: '10',
                        symbolPosition: 'end',
                        symbol: 'Rectangle',
                        symbolOffset: [-7, '-50%'],
                        symbolSize: [8, 2],
                        zlevel: 3,
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                color: '#ff8833',
                            },
                        },
                    },
                    {
                        type: 'bar',
                        name: '实际',
                        data: jdData,
                        barWidth: '4',
                        barGap: '240%',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(255,212,0,0.8)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255,212,0,0.3)',
                                        },
                                    ]
                                ),
                            },
                        },

                        label: {
                            normal: {
                                show: false,
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: '#333',
                                position: 'top',
                            },
                        },
                    },
                    {
                        data: jdData,
                        type: 'pictorialBar',
                        barMaxWidth: '10',
                        symbolPosition: 'end',
                        symbol: 'Rectangle',
                        symbolOffset: [7, '-50%'],
                        symbolSize: [8, 2],
                        zlevel: 3,
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                color: '#ffd400',
                            },
                        },
                    },
                    {
                        type: 'line',

                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,136,51,0.8)',
                            },
                        },
                        data: tmLineData,
                    },
                    {
                        type: 'line',

                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,212,0,0.8)',
                            },
                        },
                        data: jdLineData,
                    },
                ],
            }
            _chart.setOption(_options)
        },
    },
    mounted() {
        this.chartInit()
    },
}
</script>
<style lang='less' scoped>
.chart {
    width: 400px;
    height: 225px;
}
</style>